<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raid Review Mod - Statistics Hub</title>
    <style>
        @import url('https://fonts.cdnfonts.com/css/bender');

        html, body {
            margin: 0;
            padding: 0;
            background-image: url('./background.png');
            background-size: cover;
            background-repeat: no-repeat;
            font-family: 'Bender', sans-serif;
        }

        main {
            background-color: rgba(0, 0, 0, 0.75);
            height: 100vh;
            display: grid;
            place-content: center;
        }

        .dashboard {
            border: 1px solid #9a8866;
            background-color: black;
            color: #9a8866;
            padding: 16px;
        }

        .header {
            text-align: center;
            /* margin-bottom: 12px; */
        }

        h2 {
            margin: 0;
        }

        .header p {
            margin: 0;
        }

        table {
            width: 100%;
        }

        thead * {
            font-weight: bold;
            font-size: large;
        }

        .thin {
            font-weight: lighter;
        }

        td:nth-of-type(2) {
            text-align: right;
        }

        .smaller {
            font-size: x-small;
        }

        .smaller td:first {
            padding-left: 12px;
        }
    </style>
</head>
<body>
    <main>
        <div class="dashboard">
            <div class="header">
                <h2>SPT Raid Review Mod - Statistics Server</h2>
                <p>Data Collection In-Progress... Check back soon[tm]</p>
                <!-- <p>Active Raids (Live) - 22</p> -->
            </div>
            <!-- <div class="statistics-grid">
                <table>
                    <thead>
                        <tr>
                            <td>Tracked Statistic<span class="thin"> [17/06/2024 - Present]</span></td>
                            <td>Value</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Raids</td>
                            <td>22</td>
                        </tr>
                        <tr class="smaller">
                            <td>- Survived</td>
                            <td>223</td>
                        </tr>
                        <tr class="smaller">
                            <td>- Killed</td>
                            <td>223</td>
                        </tr>
                        <tr class="smaller">
                            <td>- MIA</td>
                            <td>223</td>
                        </tr>
                        <tr>
                            <td>Players</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>Kills</td>
                            <td>22</td>
                        </tr>
                        <tr class="smaller">
                            <td>- USEC</td>
                            <td>223</td>
                        </tr>
                        <tr class="smaller">                            
                            <td>- BEAR</td>
                            <td>223</td>
                        </tr>
                        <tr class="smaller">                            
                            <td>- SCAV</td>
                            <td>224</td>
                        </tr>
                        <tr>
                            <td>Locations</td>
                            <td>22</td>
                        </tr>
                        <tr class="smaller">
                            <td>- Customs</td>
                            <td>22</td>
                        </tr>
                        <tr class="smaller">
                            <td>- Shoreline</td>
                            <td>22</td>
                        </tr>
                        <tr class="smaller">
                            <td>- Factory</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>Lootings</td>
                            <td>22</td>
                        </tr>
                        <tr>
                            <td>Distance Travelled (Km)</td>
                            <td>22</td>
                        </tr>
                    </tbody>
                </table>
            </div> -->
        </div>
    </main>

    <script>

        async function getStatistics() {

            const data = await fetch(``)

        }

    </script>
</body>
</html>